<template>
<div class="div1"><input type="text" placeholder="统计开始时间" class="input1"><input type="text" placeholder="统计结束时间" class="input1">
<input type="text" placeholder="统计维度" class="input1"> <input type="text" placeholder="租户类型" class="input1">
    <button class="but1"> 查询</button>  <button class="but1">重置</button> 
    <button class="but1">导出Excel</button> 
</div>

    <div ref="chartRef" style="width: 1200px; height: 400px;" class="div1"></div>
     <div ref="chartContainer" style="width: 1200px; height: 400px;" class="div1"></div>


</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
 
const chartRef = ref(null);
 
onMounted(() => {
  const chart = echarts.init(chartRef.value);
  const option = {
    title: {
      text: '租房趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [20, 70, 50, 60, 90, 80, 100,90,80,95,100,110,100],
      type: 'line'
    }]
  };
 
  chart.setOption(option);
});
const chartContainer = ref(null);
 
onMounted(() => {
  const chart = echarts.init(chartContainer.value);
  const option = {
    title: {
      text: '合同签订趋势'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [110,580,430,280,110,430,530,280,110,215,245,475,185],
        type: 'bar'
      }
    ]
  };
 
  chart.setOption(option);
});
</script>
<style>
    .input1{
        margin-left: 10px;
    }
    .but1{
        margin-left: 10px;
    }
    .div1{
        margin-left: 40px;
        margin-top: 20px;
    }
   
</style>